<template>
  <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
    <a-form-item label="输入框" v-if="isShow('input')">
      <a-input v-model="condition.input" />
    </a-form-item>

    <a-form-item label="单选" v-if="isShow('radio')">
      <a-radio-group v-model="condition.radio">
        <a-radio :value="1">
          Option A
        </a-radio>
        <a-radio :value="2">
          Option B
        </a-radio>
        <a-radio :value="3">
          Option C
        </a-radio>
        <a-radio :value="4">
          Option D
        </a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="下拉" v-if="isShow('select')">
      <a-select v-model="condition.select">
        <a-select-option value="jack">
          Jack
        </a-select-option>
        <a-select-option value="lucy">
          Lucy
        </a-select-option>
        <a-select-option value="disabled">
          Disabled
        </a-select-option>
        <a-select-option value="Yiminghe">
          yiminghe
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="周选择" v-if="isShow('week')">
      <YearMonthWeekPicker
        :years="condition.years"
        :year="2018"
        :month="5"
        :week="3"
        :beginDay="6"
        @change="obj=>{
            condition.week.fromDate = obj.fromDate
            condition.week.toDate = obj.toDate
        }"  
      ></YearMonthWeekPicker>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit" @click="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import YearMonthWeekPicker from "./YearMonthWeekPicker";
export default {
  components: { YearMonthWeekPicker },
  props: {
    showComponents: {
      type: Array,
      default() {
        return ["input", "radio", "select",'week'];
      },
    },
    params:{
        default(){
            return {

            }
        }
    }
  },
  data() {
    return {
      condition: {
        input: "",
        radio: "",
        select: "",
        beginDay:6,
        years:[2018, 2019, 2020, 2021],
        week:{
            fromDate:'',
            toDate:''
        }
      },
    };
  },
  methods: {
    isShow(formItem) {
      return this.showComponents.indexOf(formItem) > -1;
    },
    submit() {
      if (!this.checkConditions()) return;
      console.log(this.condition);
      this.$emit('submit',this.condition)
    },

    checkConditions() {
      if (this.isShow("input")) {
        if (!this.condition.input || this.condition.input.length == 0) {
          alert("输入框不能为空");
          return false;
        }
      }
      if (this.isShow("radio")) {
        if (!this.condition.radio || this.condition.radio.length == 0) {
          alert("单选框不能为空");
          return false;
        }
      }

      if (this.isShow("select")) {
        if (!this.condition.select || this.condition.select.length == 0) {
          alert("选择框不能为空");
          return false;
        }
      }

      if (this.isShow("week")) {
        if (!this.condition.week.fromDate || this.condition.week.fromDate=='') {
          alert("周选择不能为空");
          return false;
        }
      }

      return true;
    },
    getValue()
    {
        return this.condition
    }
  },
};
</script>

<style></style>
